<template>
	<view class="container">
		<top-back-navbar position="fixed" title="钱包" background="#003563" color="#fff"></top-back-navbar>
		<cxsytabbars :current="2"></cxsytabbars>
		<view class="top_box">
			<view class="" style="margin-left: 10px">
				<p class="" style="font-size: 20px;">
					总发行量
				</p>
				<p class="" style="font-size: 17px;padding: 6px 0 0 10px;">
					{{qianbao_data.za_baht_zong}}
				</p>
			</view>
			<view class="" style=" justify-content: center;margin-left: 80px;"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=liutongmx&r=api.index.get_zakzlt_mingxi_list&title=流通量明细&hander=流通量')">
				<p class="" style="font-size: 20px;">
					流通量
				</p>
				<p class="" style="font-size: 17px;padding: 6px 0 0 10px;">
					{{qianbao_data.za_baht_lt}}
				</p>
			</view>

			<view class="" style="align-items: flex-end;">
				<p class="" style="width: 50%;">
					剩余量
					{{nonBreakingSpace}}
					{{qianbao_data.za_baht_sy}}
				</p>
				<p class="">
					当前价 {{qianbao_data.za_baht_price}}
				</p>
				<p class="">
					公益池 {{qianbao_data.shengtaichi}}
				</p>
			</view>

		</view>
		<view class="zfx_box_box">
			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=kuangshi&r=api.index.get_za_mingxi_list&title=能量值明细&hander=我的能量值')"
				style="background: url('/static/images/home/za_kuangshi_bg.png')  0 0 repeat; background-size: cover;">
				<view class="">
					能量值
				</view>
				<view class="">
					{{qianbao_data.kuangshi}}
				</view>
			</view>
			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=kuangzhu&r=api.index.get_za_mingxi_list&title=沉香铢明细&hander=我的沉香铢')"
				style="background: url('/static/images/home/za_kuangzhu_bg.png')  0 0 repeat; background-size: cover;">
				<view class="">
					沉香铢
				</view>
				<view class="">
					{{qianbao_data.kuangzhu}}
				</view>
			</view>
			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_renzhong&r=api.index.get_za_mingxi_list&title=沉香树明细&hander=我的沉香树')"
				style="background: url('/static/images/home/za_gongyichi_bg.png')  0 0 repeat; background-size: cover;">
				<view class="">
					沉香树
				</view>
				<view class="">
					{{qianbao_data.za_renzhong}}
				</view>
			</view>
		</view>

		<view style="background:#05508F; background-size: cover;width: calc(100vw - 40px);height: 40px;margin:20px auto;color: #fff;
			display: flex;justify-content: space-between;align-items: center;padding: 0 20upx;border-radius: 5px;">
			<view class="">
				职称 : {{qianbao_data.za_zn_level}}
			</view>
			<view class="">
				白条(待领取) : {{qianbao_data.baitiao}}
			</view>
		</view>

		<view class="yuan_box_box">
			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_shouyi&r=api.index.get_za_mingxi_list&title=收益明细&hander=我的收益')">
				<view class="bgi" style="padding: 0px 22px;">
					收益
				</view>
				<view class="txt">
					{{qianbao_data.za_shouyi}}
				</view>
			</view>

			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=static_chicang&r=api.index.get_za_mingxi_list&title=仓储明细&hander=我的仓储')"
				style="margin-top: 67px">
				<view class="bgi">
					仓储
				</view>
				<view class="txt">
					{{qianbao_data.static_chicang}}
				</view>
			</view>

			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=cangliang&r=api.index.get_za_mingxi_list&title=仓量明细&hander=我的仓量')">
				<view class="bgi">
					仓量
				</view>
				<view class="txt">
					{{qianbao_data.cangliang}}
				</view>
			</view>

			<view class="box" style="margin-top: 67px"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=cangdan&r=api.index.get_za_mingxi_list&title=仓单明细&hander=我的仓单')">
				<view class="bgi">
					仓单
				</view>
				<view class="txt">
					{{qianbao_data.cangdan}}
				</view>
			</view>
		</view>
		<view class="yuan_box_box" style="align-items: flex-start;">
			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_chenxiang&r=api.index.get_za_mingxi_list&title=认种积分明细&hander=我的认种积分')">
				<view class="bgi" style="padding: 0px 22px;">
					认种积分
				</view>
				<view class="txt">
					{{qianbao_data.za_chenxiang}}
				</view>
			</view>

			<view class="box" style="margin-top: 67px;opacity: 0;">
				<view class="bgi">
					占位
				</view>
				<view class="txt">
					{{qianbao_data.static_chicang}}
				</view>
			</view>

			<view class="box"
				@click="to_nextpage('/pagesZA/qianbao/mingxi?type=za_daijihuo&r=api.index.get_za_mingxi_list&title=待激活积分明细&hander=我的待激活积分')">
				<view class="bgi" style="text-align: center;">
					待激活积分
				</view>
				<view class="txt">
					{{qianbao_data.za_daijihuo}}
				</view>
			</view>

			<view class="box" style="margin-top: 67px;opacity: 0;">
				<view class="bgi">
					占位
				</view>
				<view class="txt">
					{{qianbao_data.cangdan}}
				</view>
			</view>
		</view>
		<view class="move_box">
			<view class="item" @click="tixian_touchend">
				<view class="tixian">
					
				</view>
				点击立即提现
			</view>
			
			<view class="item" style="margin-left: 40rpx;" @click="fenhong_touchend">
				<view class="fenhong">
					
				</view>
				仓单转仓储
			</view>
			
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nonBreakingSpace: '\u00A0\u00A0\u00A0',
				openid: '',
				qianbao_data: {},
				tixian_x: 0,
				tixian_y: 0,
				fenhong_x: 0,
				fenhong_y: 0,
				shu_x: 0,
				shu_y: 0,
				n: true,
				txi:0
			};
		},
		onShow: function(e) {
			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					_this.openid= id
					_this.get_data()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
			this.tixian_x = 0
			this.tixian_y = 0
			this.fenhong_x = 0
			this.fenhong_y = 0
			this.shu_x = 0
			this.shu_y = 0
			this.n=false
			setTimeout(()=>{
			
				this.n=true
			},100)
			
		},
		methods: {
			to_nextpage(path) {

				uni.navigateTo({
					url: path
				});
			},
		

			tixian_touchend() {

					uni.navigateTo({
						url: '/pagesZA/qianbao/txc?shouyi=' + this.qianbao_data.za_shouyi,
						
					});

	
			},
		
			fenhong_touchend() {
				
					uni.navigateTo({
						url: '/pagesZA/qianbao/zhuanfenhong'
					});

			},
			
			shu_touchend() {
				
					uni.navigateTo({
						url: '/pagesZA/qianbao/rengzhong'
					});
				
			},
			jifen_touchend(){
				uni.navigateTo({
					url: '/pagesZA/qianbao/jifen'
				});
			},
			get_data() {
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1&type=za&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						if (code == 1) {
							uni.navigateTo({
								url: '/pagesZA/home/home'
							});
						} else {
							this.qianbao_data = data
						}
						console.log(data);
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_openid(id) {
				this.openid = id
			},
		},
		watch:{
			// tixian_x(nv,ov){
			// 	console.log(nv,ov);
			// 	if(nv<70){
			// 		this.tixian_x=0
			// 	}
			// }
		}
	}
</script>

<style lang="less" scoped>
	page {
		height: calc(100vh - 100rpx);
		;
	}


	.container {
		height: 140vh;
		background: url('/static/images/home/za_qianbao_bg.png') 0 0 repeat;
		background-size: 100% 100%;
		// background-size: cover;
		padding: 5px 10px 104px;
	}

	.top_box {

		width: 100%;
		height: 170px;
		background: url('/static/images/home/za_faxing_box.png') 0 0 repeat;
		background-size: cover;
		box-sizing: border-box;
		color: #fff;
		padding: 31px 31px 0;

		view {
			display: flex;

		}
	}

	.zfx_box_box {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.box {
			width: 33.33%;
			height: 156px;
			padding: 88px 20px 0;
			box-sizing: border-box;
			color: #fff;
		}
	}

	.yuan_box_box {
		width: 100%;
		padding: 0 10px;
		display: flex;
		height: 100px;
		justify-content: space-between;
		align-items: center;

		.box {
			color: #fff;

			.bgi {
				background: url('/static/images/home/za_shouyi_bg.png') 0 0 repeat;
				width: 85px;
				height: 85px;
				background-size: cover;
				padding: 0 15px;
				box-sizing: border-box;
				font-size: 13px;
				line-height: 1.2;
				margin: 0 auto;
				margin-bottom: 5px;



				display: flex;
				justify-content: center;
				/* 水平居中 */
				align-items: center;
				/* 垂直居中 */
				// line-height: 72px;
				text-align: center;
			}

			.txt {
				text-align: center;
			}
		}
	}

	.move_box {

		display: flex;
		justify-content: flex-start;
		margin-top: 25px;

		// width: 100vw;
		movable-area {
			height: 40px;
			width: 30vw;
			background-color: #F0F0F0;
			overflow: hidden;
			border-radius: 50px;
			text-align: right;
			line-height: 40px;
			font-size: 10px;
		}
		
		.item{
			width: 40%;
			height: 40px;
			line-height: 40px;
			// border: 1px solid red;
			background-color: #F9F9F9;
			border-radius: 50px;
			color: #A1A1A1;
			position: relative;
			text-align: end;
			padding-right: 20rpx;
			}
		.tixian {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/za_tixian.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}

		.fenhong {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/za_zhuanfenhong.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}

		.shu {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/za_shu.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}

		movable-view {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 150rpx;
			width: 150rpx;
			background-color: #007AFF;
			color: #fff;
		}
	}
	.move_boxs {
	
		display: flex;
		justify-content: flex-end;
		margin-top: 25px;
	
		// width: 100vw;
		movable-area {
			height: 40px;
			width: 30vw;
			background-color: #F0F0F0;
			overflow: hidden;
			border-radius: 50px;
			text-align: right;
			line-height: 40px;
			font-size: 10px;
		}
		
		.item{
			width: 40%;
			height: 40px;
			line-height: 40px;
			// border: 1px solid red;
			background-color: #F9F9F9;
			border-radius: 50px;
			color: #A1A1A1;
			position: relative;
			text-align: end;
			padding-right: 20rpx;
			}
		.tixian {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/za_tixian.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}
	
		.fenhong {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/za_zhuanfenhong.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}
	
		.shu {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/za_shu.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}
		.jifen {
			width: 40px;
			height: 40px;
			background: url('/static/images/home/jifens.png') 0 0 repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
		}
	
		movable-view {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 150rpx;
			width: 150rpx;
			background-color: #007AFF;
			color: #fff;
		}
	}
</style>